<template>
  <Common  :sidebar="false">
    <div class="hero" :style="{ ...bgImageStyle }">
      <component v-if="bubbles" :is="bubbles" :options="options" ></component>
    </div>
    <div class="categories-wrapper">
      <!-- 分类集合 -->
      <ModuleTransition>
        <ul v-show="recoShowModule" class="category-wrapper">
          <li
                  class="category-item"
                  :class="title == item.name ? 'active': ''"
                  v-for="(item, index) in this.$categories.list"
                  :key="index">
            <router-link :to="item.path">
              <span class="category-name">{{ item.name }}</span>
              <span class="post-num" :style="{ 'backgroundColor': getOneColor() }">{{ item.pages.length }}</span>
            </router-link>
          </li>
        </ul>
      </ModuleTransition>

      <!-- 博客列表 -->
      <ModuleTransition delay="0.08">
        <note-abstract
                v-show="recoShowModule"
                class="list"
                :data="posts"
                :currentPage="currentPage"
                @currentTag="getCurrentTag"></note-abstract>
      </ModuleTransition>

      <!-- 分页 -->
      <ModuleTransition delay="0.16">
        <pagation
                class="pagation"
                :total="posts.length"
                :currentPage="currentPage"
                @getCurrentPage="getCurrentPage"></pagation>
      </ModuleTransition>
    </div>
  </Common>
</template>

<script>
import Common from '@theme/components/Common'
import NoteAbstract from '@theme/components/NoteAbstract'
import ModuleTransition from '@theme/components/ModuleTransition'
import pagination from '@theme/mixins/pagination'
import { sortPostsByStickyAndDate, filterPosts } from '@theme/helpers/postData'
import { getOneColor } from '@theme/helpers/other'
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'

export default {
  mixins: [pagination, moduleTransitonMixin],
  components: { Common, NoteAbstract, ModuleTransition },

  data () {
    return {
      currentPage: 1,
      bubbles:null,
    }
  },

  computed: {
    options(){
      return{
        color: 'rgba(225,225,225,0.5)', //Bubble color
        radius: 15, //Bubble radius
        densety: 0.3, // The larger the bubble density, the greater the density (suggest no more than 1).
        clearOffset: 0.2 // The larger the bubble disappears [0-1], the longer it disappears.
      }
    },
    bgImageStyle () {
      let random_bg=Math.floor(Math.random()*19+1)
      const initBgImageStyle = {
        textAlign: 'center',
        overflow: 'hidden',
        background: 'url(/img/'+random_bg+'.jpg) center/cover no-repeat'
      }
      const {
        bgImageStyle
      } = this.$frontmatter

      return bgImageStyle ? { ...initBgImageStyle, ...bgImageStyle } : initBgImageStyle
    },
    // 时间降序后的博客列表
    posts () {
      let posts = this.$currentCategories.pages
      posts = filterPosts(posts)
      sortPostsByStickyAndDate(posts)
      return posts
    },
    // 标题只显示分类名称
    title () {
      return this.$currentCategories.key
    }
  },

  mounted () {
    import('vue-canvas-effect/src/components/bubbles').then(module=>{
      this.bubbles=module.default
    }),
    this._setPage(this._getStoragePage())
  },

  methods: {
    // 获取当前tag
    getCurrentTag (tag) {
      this.$emit('currentTag', tag)
    },
    // 获取当前页码
    getCurrentPage (page) {
      this._setPage(page)
      setTimeout(() => {
        window.scrollTo(0, 0)
      }, 100)
    },
    _setPage (page) {
      this.currentPage = page
      this.$page.currentPage = page
      this._setStoragePage(page)
    },
    getOneColor
  },

  watch: {
    $route () {
      this._setPage(this._getStoragePage())
    }
  }
}
</script>

<style src="../styles/theme.styl" lang="stylus"></style>

<style lang="stylus" scoped>
@require '../styles/mode.styl'
.hero {
  position relative
  box-sizing border-box
  padding 0 20px
  height 50vh
  display flex
  align-items center
  justify-content center
  .hero-img {
    max-width: 300px;
    margin: 0 auto 1.5rem
  }

  h1 {
    display: block;
    margin:0 auto 1.8rem;
    font-size: 2.5rem;
  }

  .description {
    margin: 1.8rem auto;
    font-size: 1.6rem;
    line-height: 1.3;
  }
}
.categories-wrapper
  max-width: $contentWidth;
  margin: 0 auto;
  padding: 0rem 2.5rem 0;
  .category-wrapper {
    list-style none
    padding-left 0
    .category-item {
      vertical-align: middle;
      margin: 4px 8px 10px;
      display: inline-block;
      cursor: pointer;
      border-radius: $borderRadius
      font-size: 13px;
      box-shadow var(--box-shadow)
      transition: all .5s
      background-color var(--background-color)
      &:hover, &.active {
        background $accentColor
        a span.category-name {
          color #fff
          .post-num {
            color $accentColor
          }
        }
      }
      a {
        display flex
        box-sizing border-box
        width 100%
        height 100%
        padding: 8px 14px;
        justify-content: space-between
        align-items center
        color: #666
        .post-num {
          margin-left 4px
          width 1.2rem;
          height 1.2rem
          text-align center
          line-height 1.2rem
          border-radius $borderRadius
          font-size .7rem
          color #fff
        }
      }
    }
  }

@media (max-width: $MQMobile)
  .categories-wrapper
    padding: 4.6rem 1rem 0;
  .page-edit
    .edit-link
      margin-bottom .5rem
    .last-updated
      font-size .8em
      float none
      text-align left
</style>
